html, body{
overflow-x: hidden;
font-family: Arial, sans-serif;
background-color: #110f0f;
}
*{
max-width: 100vw;
}
.container {
position: relative;
width: 100%;
height: 100vh;
overflow: auto;
}
#baner-1{
position: absolute;
left: 50%;
width: 102%;
top: -10%;
height: 55%;
transform: translateX(-50%);
}
#logo-1 {
position: relative;
width: 190px;
right: 0px;
top: 30px;
}
#logo-2 {
position: absolute;
width: 180px;
right: 170px;
top: 27px;
}
#muno {
position: fixed;
z-index: 9;
font-size: 30px;
top: 25px;
left: 45px;
background-color: hsl(90, 100%, 50%);
border-radius: 10px;
padding: 10px 15px;
display: flex;
cursor:pointer;
color: rgb(235, 229, 229);
box-shadow: 6px 6px 10px rgba(125, 248, 2, 0.5);
}
#muno2 {
position: fixed;
top: 100px;
left: -280px;
width: 280px;
height: 67%;
background-color: #222;
z-index: 1000;
padding-top: 8%;
box-shadow: 9px 9px 10px rgba(0,0,0,0.5);
transition: left 0.6s ease-in-out;
}
#muno2 ul {
list-style: none;
margin: 0;
padding: 0;
}
#muno2 ul li {
border-bottom: 1px solid #444;
border-top: 1px solid #444;
}
#muno2 ul li a {
display: block;
padding: 18px 25px;
color: rgb(245, 179, 179);
text-decoration: none;
background-color: 0.5s;
}
#muno2 ul li a:hover {
background-color: rgb(68, 68, 68);
color: rgb(126, 243, 10);
transition: 0.6s ease-in-out;
}
#img-muno {
position: absolute;
width: 90px;
top: 3px;
right: 10px;
z-index: 1000;
}
#img-muno2 {
position: absolute;
width: 88px;
top: 3px;
left: 0;
z-index: 1000;
}
#div-muno{
background: #070780;
width: 100%;
height: 109px;
position: absolute;
top: 0;
}
#heder-div {
width: 59.5%;
height: 50px;
position: absolute;
background: #1f1f1f;
left: 40%;
top: 240px;
border: 2px solid rgb(94, 94, 94);
border-radius: 500px 0 0 ;
z-index: 2;
}
#heder-div2 {
width: 39%;
height: 50px;
position:absolute;
background:rgb(27, 27, 27);
left:0px;
top: 239px;
border: 2px solid rgb(0, 0, 0);
border-radius: 0 0 200px;
z-index: 2;
display: flex;
justify-content: center;
align-items: center
}
#ul-heder {
position: absolute;
right: 50px;
font-size: 18px;
top: -3px;
display: flex;
margin: 0;
padding: 0 ;
transition: 1s;
}
#ul-heder .li-1 {
list-style-type: none;
margin-right: 10px;
background-color: rgb(32, 31, 31);
padding: 25px 15px;
border-left: 2px solid rgb(199, 6, 238);
transition: 0.6s ease-in-out;
box-shadow: 5px 5px 8px hsl(0, 0%, 0%, 0.5);
position: relative;
margin-left: 15px;
top: 1px;
height: 20px;
text-align: center;
}
#ul-heder .li-1:hover {
background-color: rgb(4, 110, 4);
transition: 0.6s ease-in-out;
border-left: 2px solid rgb(238, 6, 6);
}
#ul-heder a {
text-decoration: none;
color: #fff;
}
#ul-heder li:hover .ul-2{
display: block;
transition: 1s ;
}
.li-2 {
padding: 5px;
position: relative;
top: 10px;
}
.li-2:hover{
background-color: #20a820ce;
}
.ul-2 {
background: #21b10e;
width: 130px;
height: 200px;
position: absolute;
list-style: none;
right: 40px;
padding: 0;
border-radius: 10px;
box-shadow: 6px 6px 10px hsl(0, 0%, 0%);
padding-bottom: 30px;
margin-top: 19px;
display: none;
transition: 1s ;
z-index: 999;
}
.li-2 a {
white-space: nowrap;
display: block;
padding-top: 30px;
color: #000000;
text-decoration: none;
padding: 5px;
margin: 0;
}
.instgram {
position: absolute;
left: -59.5%;
top: -140px;
font-size: 38px;
z-index: 99;
transition: 0.8s ease-in-out;
}
.instgram-icon {
color: #bda747;
cursor: pointer;
transition: 0.5s ease-in-out;
}
.instgram-icon:hover {
color: #f00bb7;
transition: 0.5s ease-in-out;
}
.text-icon1 {
display: none;
position: absolute;
top: 15px;
left: 130%;
font-size: 14px;
background-color:#ca47a9;
color: #fff;
padding: 7px;
border-radius: 15px 0 15px 0;
white-space: nowrap;
transition: 0.8s ease-in-out;
}
.instgram:hover .text-icon1 {
display: block;
transition: 0.8s ease-in-out;
}
.telegram {
position:relative;
right: 155.5% ;
top: -93px;
font-size: 35px;
}
.telegram-icon {
color: #bda747;
cursor: pointer;
transition: 0.5s ease-in-out;
}
.telegram-icon:hover {
color: #0b1bf8;
transition: 0.5s ease-in-out;
}
.text-icon2 {
display: none;
position: absolute;
top: 11px;
left: 101%;
font-size: 14px;
background-color:#4750ca;
color: #fff;
padding: 7px;
border-radius: 15px 0 15px 0;
white-space: nowrap;
transition: 0.8s ease-in-out;
}
.telegram:hover .text-icon2 {
display: block;
transition: 0.8s ease-in-out;
}
.youtube {
position:relative;
right: 154.7% ;
top: -90px;
font-size: 42px;
}
.youtube-icon {
color: #bda747;
cursor: pointer;
transition: 0.5s ease-in-out;
}
.youtube-icon:hover{
color: #f80b0b;
transition: 0.5s ease-in-out;
}
.text-icon3 {
display: none;
position: absolute;
top: 11px;
left: 101%;
font-size: 14px;
background-color:#ca4747;
color: #fff;
padding: 8px;
border-radius: 15px 0 15px 0;
white-space: nowrap;
transition: 0.8s ease-in-out;
}
.youtube:hover .text-icon3 {
display: block;
transition: 0.8s ease-in-out;
}
#p-onvaN {
margin-right: 50px;
margin-top: 160px;
font-size: 20px;
text-shadow: 8px 8px 12px hsl(0, 0%, 0%, 0.7);
color: rgb(206, 206, 206);
z-index: 1000;
}
.box-time{
position: absolute;
border: 1px solid rgb(23, 104, 3);
background-color: #34ac1c;
box-shadow: 6px 6px 10px rgba(0, 0, 0, 0.5);
width: 90px;
height: 30px;
z-index: 999;
left: 10px;
bottom: 14px;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: flex-start;
padding: 0 5px;
box-sizing: border-box;
}
#icon-time{
position: absolute;
color: #fff;
font-size: 16px;
left: 5px;
}
.p-time{
margin: 0;
text-align: right;
flex-grow: 1;
font-size: 14px;
color: rgb(0, 0, 0);
}
.div-music{
position: absolute;
width: 64%;
height: 280px;
right: 10px;
top: 480px;
background-color: #34ac1c;
border-radius: 15px;
box-shadow: 6px 6px 10px hsl(120, 100%, 25%, 0.7);
opacity: 0;
transform: translateX(400px);
transition: all 0.9s ease-out;
}
.div-music.show, .div-music2.show, .div-music3.show, .div-music4.show,
.div-music5.show, .div-music6.show, .div-music7.show,.div-music8.show,.div-music9.show {
opacity: 1;
transform: translateX(0);
}
.tarikh-1 {
position: absolute;
font-size: 12px;
bottom: 17px;
right: 25px;
color: rgb(14, 49, 14);
text-decoration: underline;
}
#img-music1 {
position: absolute;
width: 40%;
height: 90%;
right: 22px;
top: 15px;
border-radius: 5px;
z-index: 999;
box-shadow: 10px 10px 10px rgba(9, 54, 9, 0.7);
}
#div-box {
position: absolute;
width: 52%;
height: 87%;
left: 2.5%;
top: 19px;
border-radius: 5px;
background-color: #369123 ;
}
#h2-1 {
direction: rtl;
position: relative;
right: 14px;
color: #082e00;
}
#p-1 {
direction: rtl;
position: absolute;
right: 15px ;
top: 50px;
font-size: 18px;
}
.a-1 {
position: absolute;
bottom: 13px;
left: 116px;
padding: 5px;
width: 180px;
height: 36px;
background: #6ae751;
border-radius: 6px;
text-decoration: none;
font-size: 18px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid rgb(0, 255, 0);
color: #000000;
box-shadow: 6px 6px 9px hsl(0, 0%, 0%, 0.5);
transition: 0.7s ease-in-out;
overflow: hidden;
}
.a-1::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
background: linear-gradient(50deg, transparent, rgba(255, 255, 255, 0.6), transparent);
transform: rotate(50deg);
animation: shine 3s infinite;
}
@keyframes shine {
0% {
transform: translateX(100%) translateY(-100%) rotate(50deg); }
100% {
transform: translateX(-100%) translateY(100%) rotate(50deg); }
}
.a-1:hover {
border: 1px solid rgb(217, 255, 0);
background-color: #33ee04;
transition: 0.7s ease-in-out;
}
.div-music2 {
position: absolute;
width: 64%;
height: 280px;
right: 10px;
top: 125%;
background-color: #ac1c1c;
border-radius: 15px;
box-shadow: 6px 6px 10px rgba(128, 0, 0, 0.7);
opacity: 0;
transform: translateX(400px);
transition: all 0.9s ease-out;
}
.tarikh-2 {
position: absolute;
font-size: 12px;
bottom: 17px;
right: 25px;
color: rgb(49, 14, 14);
text-decoration: underline;
}
.box-time2{
position: absolute;
border: 1px solid rgb(104, 3, 3);
background-color: #ac1c1c;
box-shadow: 6px 6px 10px rgba(0, 0, 0, 0.5);
width: 90px;
height: 30px;
z-index: 999;
left: 10px;
bottom: 14px;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: flex-start;
padding: 0 5px;
box-sizing: border-box;
}
#icon-time2{
position: absolute;
color: #fff;
font-size: 16px;
left: 5px;
}
.p-time2{
margin: 0;
text-align: right;
flex-grow: 1;
font-size: 14px;
color: rgb(0, 0, 0);
}
#img-music2 {
position: absolute;
width: 40%;
height: 90.5%;
right: 22px;
top: 15px;
border-radius: 5px;
z-index: 999;
box-shadow: 10px 10px 10px rgba(43, 7, 7, 0.7);
}
#div-box2 {
position: absolute;
width: 52%;
height: 87%;
left: 2.5%;
top: 19px;
border-radius: 5px;
background-color: #912323 ;
}
#h2-2 {
direction: rtl;
position: relative;
right: 14px;
color: #350202;
}
#p-2 {
direction: rtl;
position: absolute;
right: 15px ;
top: 50px;
font-size: 18px;
}
.a-2 {
position: absolute;
bottom: 13px;
left: 116px;
padding: 5px;
width: 180px;
height: 36px;
background-color: #e75151;
border-radius: 6px;
text-decoration: none;
font-size: 18px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid rgb(255, 0, 0);
color: #000000;
box-shadow: 6px 6px 9px hsl(0, 0%, 0%, 0.5);
transition: 0.7s ease-in-out;
overflow: hidden;
}
.a-2::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
background: linear-gradient(50deg, transparent, rgba(255, 255, 255, 0.7), transparent) ;
transform: rotate(50deg);
animation: shine 3s infinite;
}
.a-2:hover {
border: 1px solid rgb(174, 0, 255);
background-color: #ee0404;
transition: 0.7s ease-in-out;
}
.div-music3 {
position: absolute;
width: 64%;
height: 280px;
right: 10px;
top: 176%;
background-color: #9b9090ce;
border-radius: 15px;
box-shadow: 6px 6px 10px rgba(56, 55, 55, 0.7);
opacity: 0;
transform: translateX(400px);
transition: all 0.9s ease-out;
}
.tarikh-3 {
position: absolute;
font-size: 12px;
bottom: 17px;
right: 25px;
color: rgb(26, 25, 25);
text-decoration: underline;
}
.box-time3{
position: absolute;
border: 1px solid rgb(27, 26, 26);
background-color: #797575;
box-shadow: 6px 6px 10px rgba(0, 0, 0, 0.5);
width: 90px;
height: 30px;
z-index: 999;
left: 10px;
bottom: 14px;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: flex-start;
padding: 0 5px;
box-sizing: border-box;
}
#icon-time3{
position: absolute;
color: rgb(255, 255, 255);
font-size: 16px;
left: 5px;
}
.p-time3{
margin: 0;
text-align: right;
flex-grow: 1;
font-size: 14px;
color: rgb(0, 0, 0);
}
#img-music3 {
position: absolute;
width: 40%;
height: 90.5%;
right: 22px;
top: 15px;
border-radius: 5px;
z-index: 999;
box-shadow: 10px 10px 10px rgba(49, 49, 49, 0.7);
}
#div-box3 {
position: absolute;
width: 52%;
height: 87%;
left: 2.5%;
top: 19px;
border-radius: 5px;
background-color: #757070 ;
}
#h2-3 {
direction: rtl;
position: relative;
right: 14px;
color: #2c2c2c;
}
#p-3 {
direction: rtl;
position: absolute;
right: 15px ;
top: 50px;
font-size: 18px;
}
.a-3 {
position: absolute;
bottom: 13px;
left: 116px;
padding: 5px;
width: 180px;
height: 36px;
background-color: #998f8f;
border-radius: 6px;
text-decoration: none;
font-size: 18px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid rgb(0, 0, 0);
color: #000000;
box-shadow: 6px 6px 9px hsl(0, 0%, 0%, 0.5);
transition: 0.7s ease-in-out;
overflow: hidden;
}
.a-3::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
background: linear-gradient(50deg, transparent, rgba(255, 255, 255, 0.8), transparent);
transform: rotate(50deg);
animation: shine 3s infinite;
}
.a-3:hover {
border: 1px solid rgb(255, 255, 255);
background-color: #535353;
transition: 0.7s ease-in-out;
}
.div-music4{
position: absolute;
width: 64%;
height: 280px;
right: 10px;
top: 227%;
background-color: #34ac1c;
border-radius: 15px;
box-shadow: 6px 6px 10px hsl(120, 100%, 25%, 0.7);
opacity: 0;
transform: translateX(400px);
transition: all 0.9s ease-out;
}
.tarikh-4 {
position: absolute;
font-size: 12px;
bottom: 17px;
right: 25px;
color: rgb(14, 49, 14);
text-decoration: underline;
}
.box-time4{
position: absolute;
border: 1px solid rgb(74, 153, 0);
background-color: #62be2c;
box-shadow: 6px 6px 10px rgba(0, 0, 0, 0.5);
width: 90px;
height: 30px;
z-index: 999;
left: 10px;
bottom: 14px;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: flex-start;
padding: 0 5px;
box-sizing: border-box;
}
#icon-time4{
position: absolute;
color: rgb(255, 255, 255);
font-size: 16px;
left: 5px;
}
.p-time4{
margin: 0;
text-align: right;
flex-grow: 1;
font-size: 14px;
color: rgb(0, 0, 0);
}
#img-music4 {
position: absolute;
width: 40%;
height: 90%;
right: 22px;
top: 15px;
border-radius: 5px;
z-index: 999;
box-shadow: 10px 10px 10px rgba(9, 54, 9, 0.7);
}
#div-box4 {
position: absolute;
width: 52%;
height: 87%;
left: 2.5%;
top: 19px;
border-radius: 5px;
background-color: #369123 ;
}
#p-4 {
direction: rtl;
position: absolute;
right: 15px ;
top: 50px;
font-size: 18px;
}
.div-music5 {
position: absolute;
width: 64%;
height: 280px;
right: 10px;
top: 279%;
background-color: #ac1c1c;
border-radius: 15px;
box-shadow: 6px 6px 10px rgba(128, 0, 0, 0.7);
opacity: 0;
transform: translateX(400px);
transition: all 0.9s ease-out;
}
.tarikh-5 {
position: absolute;
font-size: 12px;
bottom: 17px;
right: 25px;
color: rgb(49, 14, 14);
text-decoration: underline;
}
#img-music5 {
position: absolute;
width: 40%;
height: 90.5%;
right: 22px;
top: 15px;
border-radius: 5px;
z-index: 999;
box-shadow: 10px 10px 10px rgba(43, 7, 7, 0.7);
}
#div-box5 {
position: absolute;
width: 52%;
height: 87%;
left: 2.5%;
top: 19px;
border-radius: 5px;
background-color: #912323 ;
}
#p-5 {
direction: rtl;
position: absolute;
right: 15px ;
top: 50px;
font-size: 18px;
}
.div-music6 {
position: absolute;
width: 64%;
height: 280px;
right: 10px;
top: 331%;
background-color: #9b9090ce;
border-radius: 15px;
box-shadow: 6px 6px 10px rgba(56, 55, 55, 0.7);
opacity: 0;
transform: translateX(400px);
transition: all 0.9s ease-out;
}
.tarikh-6 {
position: absolute;
font-size: 12px;
bottom: 17px;
right: 25px;
color: rgb(26, 25, 25);
text-decoration: underline;
}
#img-music6 {
position: absolute;
width: 40%;
height: 90.5%;
right: 22px;
top: 15px;
border-radius: 5px;
z-index: 999;
box-shadow: 10px 10px 10px rgba(49, 49, 49, 0.7);
}
#div-box6 {
position: absolute;
width: 52%;
height: 87%;
left: 2.5%;
top: 19px;
border-radius: 5px;
background-color: #757070 ;
}
#p-6 {
direction: rtl;
position: absolute;
right: 15px ;
top: 50px;
font-size: 18px;
}
.div-music7{
position: absolute;
width: 64%;
height: 280px;
right: 10px;
top: 383%;
background-color: #34ac1c;
border-radius: 15px;
box-shadow: 6px 6px 10px hsl(120, 100%, 25%, 0.7);
opacity: 0;
transform: translateX(400px);
transition: all 0.9s ease-out;
z-index: 999;
}
.tarikh-7 {
position: absolute;
font-size: 12px;
bottom: 17px;
right: 25px;
color: rgb(14, 49, 14);
text-decoration: underline;
z-index: 999;
}
#img-music7 {
position: absolute;
width: 40%;
height: 90%;
right: 22px;
top: 15px;
border-radius: 5px;
z-index: 999;
box-shadow: 10px 10px 10px rgba(9, 54, 9, 0.7);
}
#div-box7 {
position: absolute;
width: 52%;
height: 87%;
left: 2.5%;
top: 19px;
border-radius: 5px;
background-color: #369123 ;
}
#h2-7 {
direction: rtl;
position: relative;
right: 14px;
color: #082e00;
}
#p-7 {
direction: rtl;
position: absolute;
right: 15px ;
top: 50px;
font-size: 18px;
}
.div-music8 {
position: absolute;
width: 64%;
height: 280px;
right:10px;
top: 435%;
background-color: #ac1c1c;
border-radius: 15px;
box-shadow: 6px 6px 10px rgba(128, 0, 0, 0.7);
opacity: 0;
transform: translateX(400px);
transition: all 0.9s ease-out;
}
.tarikh-8 {
position: absolute;
font-size: 12px;
bottom: 17px;
right: 25px;
color: rgb(49, 14, 14);
text-decoration: underline;
}
#img-music8 {
position: absolute;
width: 40%;
height: 90.5%;
right: 22px;
top: 15px;
border-radius: 5px;
z-index: 999;
box-shadow: 10px 10px 10px rgba(43, 7, 7, 0.7);
}
#p-8 {
direction: rtl;
position: absolute;
right: 15px ;
top: 40px;
font-size: 18px;
}
#p-fit2{
position: absolute;
top: 74px;
right: 14px;
font-size: 15px;
}
#div-box8 {
position: absolute;
width: 52%;
height: 87%;
left: 2.5%;
top: 19px;
border-radius: 5px;
background-color: #912323 ;
}
.div-music9 {
position: absolute;
width: 64%;
height: 280px;
right: 10px;
top: 486%;
background-color: #9b9090ce;
border-radius: 15px;
box-shadow: 6px 6px 10px rgba(56, 55, 55, 0.7);
opacity: 0;
transform: translateX(400px);
transition: all 0.9s ease-out;
}
.tarikh-9 {
position: absolute;
font-size: 12px;
bottom: 17px;
right: 25px;
color: rgb(26, 25, 25);
text-decoration: underline;
}
#img-music9 {
position: absolute;
width: 40%;
height: 90.5%;
right: 22px;
top: 15px;
border-radius: 5px;
z-index: 999;
box-shadow: 10px 10px 10px rgba(49, 49, 49, 0.7);
}
#div-box9 {
position: absolute;
width: 52%;
height: 87%;
left: 2.5%;
top: 19px;
border-radius: 5px;
background-color: #757070 ;
}
#p-9 {
direction: rtl;
position: absolute;
right: 15px ;
top: 40px;
font-size: 18px;
}
#p-fit{
position: absolute;
top: 74px;
right: 14px;
font-size: 15px;
}
.loding {
position: fixed;
inset: 0;
background-color: rgba(255, 255, 255, 0.4);
z-index: 100;
}
.icon-loding {
position: absolute;
z-index: 101;
width: 5px;
height: 5px;
background-color: #ff5100;
top: 360px;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
}
.icon-loding::before {
content: ' ' ;
position: absolute;
width: 60px;
height: 60px;
background-color: #ff5100;
border-radius: 50%;
opacity: 0;
right: -26px;
top: -30px;
animation: Animytion-loding 1s linear 1s infinite normal ;
}
.img-loding {
position: absolute;
width: 150px;
height: 150px;
border-radius: 50%;
top: 360px;
left: 50%;
z-index: 102;
transform: translate(-50%, -50%);
animation: rotate 4s linear infinite;
}
#samp-loding {
position: absolute;
top: 65%;
left: 52%;
z-index: 100;
color:#f8930f;
}
b {
font-size: 15px;
}
@keyframes Animytion-loding {
from {
opacity: 0;
transform: scale(1);
}
to {
opacity: 0.5;
transform: scale(2);
}
}
@keyframes rotate {
from {
transform: translate(-50%, -50%) rotate(0deg);
}
to {
transform: translate(-50%, -50%) rotate(360deg);
}
}
.jostjoosit {
max-width: 100%;
width: 260px;
height: auto;
margin-left: 45px;
background-color: #1e1f20;
border: 2px solid #000000;
border-radius: 0px 5px 5px 0px ;
padding: 12px 15px;
font-size: 15px;
display: flex;
justify-content: flex-end;
align-items: center;
color: #fff;
}
#icon-submit{
position: absolute;
top: 5px;
left: 139px;
width: 45px;
height: 41px;
border: 1px solid #34ac1c;
background-color:#1d9b04;
cursor: pointer;
}
#icon-submit:active{
background-color: #0d6114;
border: 1px solid #0d6114;
}
#icon-search{
font-size: 19px;
color: rgb(212, 211, 211);
transition: 0.8s ease-in-out;
}
#icon-submit:hover #icon-search {
color: rgb(255, 255, 255);
font-size: 20px;
transition: 0.8s ease-in-out;
}
@media (max-width: 320px) {
#baner-1 {
width: 120%;
margin-top: -15px;
height: 40%;
}
#logo-1 {
width: 120px;
top: 5px;
}
#logo-2 {
width: 110px;
right: 85px;
top: 5px;
}
#muno {
font-size: 22px;
top: 10px;
left: 8px;
padding: 10px 10px;
display: flex;
}
#muno2 {
width: 200px;
left: -200px;
top: 60px;
height: 450px;
}
#heder-div {
width: 100%;
top: 180px;
left: 0;
border-radius: 50%;
height: 0;
position: relative;
}
#ul-heder {
flex-direction: column;
position: relative;
right: 0;
top: 0;
width: 100%;
}
#ul-heder .li-1 {
width: 100%;
margin: 5px 0;
padding: 10px;
}
.instgram {
position: absolute;
right: 70%;
top: -272px;
margin: 5px;
font-size: 28px;
}
.telegram{
position: absolute;
right: 80%;
top: -272px;
margin: 5px;
font-size: 28px;
}
.youtube{
position: absolute;
right:90%;
top: -272px;
margin: 5px;
font-size: 28px;
}
.text-icon1, .text-icon2, .text-icon3 {
display: none;
}
/* ★ گزینههای منو - کنار آیکنها */
#ul-heder {
flex-direction: row;
position: relative;
right: 0;
width: auto;
gap: 5px;
justify-content: flex-end;
margin-top: 15px;
margin-right: 10px;
}
#ul-heder .li-1 {
width: auto;
margin: 0 3px;
padding: 8px 10px;
font-size: 12px;
height: auto;
border-left: 1px solid rgb(199, 6, 238);
}
/* ★ جستجو - زیر اینا */
#heder-div2 {
width: 100%;
position: absolute;
top: -20px;
left: 0;
border-radius: 0;
}
#icon-submit {
width: 35px;
height: 30px;
left:auto;
position: relative;
top: auto;
margin: 20px 0 20px 0;
border-radius: 2px;
display: inline-block;
}
.jostjoosit {
width: 38%;
margin-left: 28px;
padding: 8px 10px;
font-size: 12px;
margin-top: -86px;
}
#p-onvaN {
margin-right: 15px;
margin-top: 320px;
font-size: 14px;
}
#icon-submit {
width: 35px;
height: 34px;
left: 2px;
}
#icon-search {
font-size: 14px;
}
.div-music, .div-music2, .div-music3, .div-music4, .div-music5, .div-music6, .div-music7, .div-music8, .div-music9 {
position: relative;
width: 95%;
height: auto;
right: auto;
left: auto;
margin: 15px auto;
top: auto;
opacity: 1;
transform: translateX(0);
}
#img-music1, #img-music2, #img-music3, #img-music4, #img-music5, #img-music6, #img-music7, #img-music8, #img-music9 {
position: relative;
width: 100%;
height: 180px;
right: auto;
top: auto;
border-radius: 8px 8px 0 0;
}
#div-box, #div-box2, #div-box3, #div-box4, #div-box5, #div-box6, #div-box7, #div-box8, #div-box9 {
position: relative;
width: 100%;
height: auto;
left: auto;
top: auto;
border-radius: 0 0 8px 8px;
padding: 10px;
}
#h2-1, #h2-2, #h2-3 {
font-size: 13px;
position: relative;
right: 0;
}
#p-1, #p-2, #p-3, #p-4, #p-5, #p-6, #p-7, #p-8, #p-9, #p-fit, #p-fit2 {
font-size: 12px;
position: relative;
right: 0;
top: 0;
}
.tarikh-1, .tarikh-2, .tarikh-3, .tarikh-4, .tarikh-5, .tarikh-6, .tarikh-7, .tarikh-8, .tarikh-9 {
position: relative;
font-size: 10px;
right: 0;
bottom: auto;
margin: 5px 0;
}
.box-time, .box-time2, .box-time3, .box-time4 {
position: relative;
width: 70px;
height: 24px;
left: 0;
bottom: auto;
margin: 5px 0;
}
.a-1, .a-2, .a-3 {
position: relative;
width: 90%;
height: 30px;
left: 0;
bottom: auto;
margin: 8px auto;
font-size: 14px;
}
}
/* ★ SMALL PHONES: 360px ★ */
@media (max-width: 360px) and (min-width: 321px) {
#baner-1 {
width: 115%;
top: -12%;
height: 42%;
}
#logo-1 {
width: 110px;
top: 8px;
}
#logo-2 {
width: 100px;
right: 95px;
top: 8px;
}
#muno {
font-size: 24px;
top: 12px;
left: 10px;
padding: 7px 11px;
display: flex;
}
#muno2 {
width: 210px;
left: -210px;
top: 65px;
}
#heder-div, #heder-div2 {
width: 100%;
top: 185px;
left: 0;
border-radius: 0;
position: relative;
height: auto;
}
#ul-heder {
flex-direction: column;
position: relative;
right: 0;
width: 100%;
gap: 5px;
}
#ul-heder .li-1 {
width: 100%;
margin: 4px 0;
padding: 10px;
height: auto;
}
.instgram {
position: absolute;
right: 70%;
top: -272px;
margin: 5px;
font-size: 28px;
}
.telegram{
position: absolute;
right: 80%;
top: -272px;
margin: 5px;
font-size: 28px;
}
.youtube{
position: absolute;
right:90%;
top: -272px;
margin: 5px;
font-size: 28px;
}
.text-icon1, .text-icon2, .text-icon3 {
display: none;
}
/* ★ گزینههای منو - کنار آیکنها */
#ul-heder {
flex-direction: row;
position: relative;
right: 0;
width: auto;
gap: 5px;
justify-content: flex-end;
margin-top: 15px;
margin-right: 10px;
}
#ul-heder .li-1 {
width: auto;
margin: 0 3px;
padding: 8px 10px;
font-size: 12px;
height: auto;
border-left: 1px solid rgb(199, 6, 238);
}
/* ★ جستجو - زیر اینا */
#heder-div2 {
width: 100%;
margin-top: 80px;
position: relative;
top: auto;
left: auto;
border-radius: 0;
}
.jostjoosit {
width: 90%;
margin: 15px auto;
padding: 8px 10px;
font-size: 12px;
}
#icon-submit {
width: 35px;
height: 34px;
left: auto;
position: relative;
}
/* ★ متن بزرگ - زیر جستجو */
#p-onvaN {
margin-right: 15px;
margin-top: 320px;
font-size: 14px;
}
.jostjoosit {
width: 220px;
margin-left: 12px;
padding: 9px 11px;
font-size: 13px;
}
#icon-submit {
width: 37px;
height: 35px;
left: 5px;
}
.div-music, .div-music2, .div-music3, .div-music4, .div-music5, .div-music6, .div-music7, .div-music8, .div-music9 {
position: relative;
width: 94%;
height: auto;
margin: 15px auto;
opacity: 1;
transform: translateX(0);
}
#img-music1, #img-music2, #img-music3, #img-music4, #img-music5, #img-music6, #img-music7, #img-music8, #img-music9 {
position: relative;
width: 100%;
height: 190px;
border-radius: 10px 10px 0 0;
}
#div-box, #div-box2, #div-box3, #div-box4, #div-box5, #div-box6, #div-box7, #div-box8, #div-box9 {
position: relative;
width: 100%;
height: auto;
border-radius: 0 0 10px 10px;
padding: 12px;
}
#h2-1, #h2-2, #h2-3 {
font-size: 14px;
position: relative;
right: 0;
}
#p-1, #p-2, #p-3, #p-4, #p-5, #p-6, #p-7, #p-8, #p-9, #p-fit, #p-fit2 {
font-size: 13px;
position: relative;
right: 0;
top: 0;
}
.a-1, .a-2, .a-3 {
position: relative;
width: 95%;
height: 32px;
margin: 10px auto;
font-size: 15px;
}
}
/* ★ IPHONE: 375px - 414px ★ */
@media (max-width: 414px) and (min-width: 361px) {
#baner-1 {
width: 112%;
top: -10%;
height: 44%;
}
#logo-1 {
width: 130px;
top: 10px;
}
#logo-2 {
width: 120px;
right: 110px;
top: 10px;
}
#muno {
font-size: 26px;
top: 15px;
left: 12px;
padding: 8px 12px;
display: flex;
}
#muno2 {
width: 240px;
left: -240px;
top: 70px;
}
#heder-div, #heder-div2 {
width: 100%;
top: 0;
left: 0;
border-radius: 15;
position: relative;
height: auto;
}
#ul-heder {
flex-direction: column;
position: relative;
right: 0;
width: 100%;
gap: 8px;
}
#ul-heder .li-1 {
width: 100%;
margin: 5px 0;
padding: 12px;
height: auto;
}
.instgram {
position: absolute;
right: 70%;
top: -272px;
margin: 5px;
font-size: 28px;
}
.telegram{
position: absolute;
right: 80%;
top: -272px;
margin: 5px;
font-size: 28px;
}
.youtube{
position: absolute;
right:90%;
top: -272px;
margin: 5px;
font-size: 28px;
}
.text-icon1, .text-icon2, .text-icon3 {
display: none;
}
/* ★ گزینههای منو - کنار آیکنها */
#ul-heder {
flex-direction: row;
position: relative;
right: 0;
width: auto;
gap: 5px;
justify-content: flex-end;
margin-top: 15px;
margin-right: 10px;
}
#ul-heder .li-1 {
width: auto;
margin: 0 3px;
padding: 8px 10px;
font-size: 12px;
height: auto;
border-left: 1px solid rgb(199, 6, 238);
}
/* ★ جستجو - زیر اینا */
#heder-div2 {
width: 100%;
margin-top:0;
position: relative;
top: auto;
left: auto;
border-radius: 0;
}
.jostjoosit {
width: 90%;
margin: 15px auto;
padding: 8px 10px;
font-size: 12px;
}
#icon-submit {
width: 35px;
height: 34px;
left: auto;
position: relative;
}
/* ★ متن بزرگ - زیر جستجو */
#p-onvaN {
margin-right: 15px;
margin-top: 320px;
font-size: 14px;
}
.jostjoosit {
width: 250px;
margin-left: 15px;
padding: 10px 12px;
font-size: 14px;
}
#icon-submit {
width: 40px;
height: 36px;
left: 8px;
}
.div-music, .div-music2, .div-music3, .div-music4, .div-music5, .div-music6, .div-music7, .div-music8, .div-music9 {
position: relative;
width: 92%;
height: auto;
margin: 18px auto;
opacity: 1;
transform: translateX(0);
}
#img-music1, #img-music2, #img-music3, #img-music4, #img-music5, #img-music6, #img-music7, #img-music8, #img-music9 {
position: relative;
width: 100%;
height: 210px;
border-radius: 12px 12px 0 0;
}
#div-box, #div-box2, #div-box3, #div-box4, #div-box5, #div-box6, #div-box7, #div-box8, #div-box9 {
position: relative;
width: 100%;
height: auto;
border-radius: 0 0 12px 12px;
padding: 14px;
}
#h2-1, #h2-2, #h2-3 {
font-size: 15px;
position: relative;
right: 0;
}
#p-1, #p-2, #p-3, #p-4, #p-5, #p-6, #p-7, #p-8, #p-9, #p-fit, #p-fit2 {
font-size: 14px;
position: relative;
right: 0;
top: 0;
}
.a-1, .a-2, .a-3 {
position: relative;
width: 96%;
height: 34px;
margin: 12px auto;
font-size: 16px;
}
}
/* ★ LARGER PHONES: 430px - 480px ★ */
@media (max-width: 480px) and (min-width: 415px) {
#baner-1 {
width: 108%;
top: -8%;
height: 46%;
}
#logo-1 {
width: 150px;
top: 12px;
}
#logo-2 {
width: 140px;
right: 130px;
top: 12px;
}
#muno {
font-size: 28px;
top: 28px;
left: 15px;
padding: 9px 13px;
display: flex;
}
#muno2 {
width: 260px;
left: -260px;
top: 75px;
}
#heder-div, #heder-div2 {
width: 100%;
top: 195px;
left: 0;
border-radius: 0;
position: relative;
height: auto;
}
#ul-heder {
flex-wrap: wrap;
position: relative;
right: 0;
width: 100%;
justify-content: space-around;
}
#ul-heder .li-1 {
width: auto;
margin: 6px;
padding: 12px;
height: auto;
}
.instgram {
position: absolute;
right: 70%;
top: -272px;
margin: 5px;
font-size: 28px;
}
.telegram{
position: absolute;
right: 80%;
top: -272px;
margin: 5px;
font-size: 28px;
}
.youtube{
position: absolute;
right:90%;
top: -272px;
margin: 5px;
font-size: 28px;
}
.text-icon1, .text-icon2, .text-icon3 {
display: none;
}
/* ★ گزینههای منو - کنار آیکنها */
#ul-heder {
flex-direction: row;
position: relative;
right: 0;
width: auto;
gap: 5px;
justify-content: flex-end;
margin-top: 15px;
margin-right: 10px;
}
#ul-heder .li-1 {
width: auto;
margin: 0 3px;
padding: 8px 10px;
font-size: 12px;
height: auto;
border-left: 1px solid rgb(199, 6, 238);
}
/* ★ جستجو - زیر اینا */
#heder-div2 {
width: 100%;
margin-top: 200px;
position: absolute;
top: -100px !important;
left: auto;
border-radius: 0;
}
.jostjoosit {
width: 90%;
margin: 15px auto;
padding: 8px 10px;
font-size: 12px;
}
#icon-submit {
width: 35px;
height: 34px;
left: auto;
position: relative;
}
/* ★ متن بزرگ - زیر جستجو */
#p-onvaN {
margin-right: 15px;
margin-top: 320px;
font-size: 14px;
}
.jostjoosit {
width: 280px;
margin-left: 18px;
padding: 10px 13px;
font-size: 15px;
}
#icon-submit {
width: 42px;
height: 38px;
left: 10px;
}
.div-music, .div-music2, .div-music3, .div-music4, .div-music5, .div-music6, .div-music7, .div-music8, .div-music9 {
position: relative;
width: 90%;
height: auto;
margin: 20px auto;
opacity: 1;
transform: translateX(0);
}
#img-music1, #img-music2, #img-music3, #img-music4, #img-music5, #img-music6, #img-music7, #img-music8, #img-music9 {
position: relative;
width: 100%;
height: 230px;
border-radius: 14px 14px 0 0;
}
#div-box, #div-box2, #div-box3, #div-box4, #div-box5, #div-box6, #div-box7, #div-box8, #div-box9 {
position: relative;
width: 100%;
height: auto;
border-radius: 0 0 14px 14px;
padding: 16px;
}
.a-1, .a-2, .a-3 {
position: relative;
width: 97%;
height: 36px;
margin: 14px auto;
font-size: 17px;
}
}
/* ★ TABLETS: 576px - 768px ★ */
@media (max-width: 768px) and (min-width: 481px) {
#baner-1 {
width: 105%;
top: -5%;
height: 48%;
}
#logo-1 {
width: 170px;
top: 15px;
}
#logo-2 {
width: 160px;
right: 150px;
top: 15px;
}
#muno {
font-size: 30px;
top: 20px;
left: 20px;
padding: 10px 14px;
display: flex;
}
#muno2 {
width: 280px;
left: -280px;
top: 80px;
}
#heder-div, #heder-div2 {
width: 100%;
top: 200px;
left: 0;
border-radius: 0;
position: relative;
height: auto;
}
#ul-heder {
flex-wrap: wrap;
position: relative;
right: 0;
width: 100%;
justify-content: center;
gap: 10px;
}
#ul-heder .li-1 {
margin: 5px;
padding: 14px 16px;
height: auto;
}
.instgram {
position: absolute;
right: 70%;
top: -272px;
margin: 5px;
font-size: 28px;
}
.telegram{
position: absolute;
right: 80%;
top: -272px;
margin: 5px;
font-size: 28px;
}
.youtube{
position: absolute;
right:90%;
top: -272px;
margin: 5px;
font-size: 28px;
}
#p-onvaN {
margin-right: 25px;
margin-top: 260px;
font-size: 18px;
}
.jostjoosit {
width: 320px;
margin-left: 20px;
padding: 11px 14px;
font-size: 16px;
}
#icon-submit {
width: 44px;
height: 40px;
left: 12px;
}
.div-music, .div-music2, .div-music3, .div-music4, .div-music5, .div-music6, .div-music7, .div-music8, .div-music9 {
position: relative;
width: 88%;
height: auto;
margin: 25px auto;
opacity: 1;
transform: translateX(0);
}
#img-music1, #img-music2, #img-music3, #img-music4, #img-music5, #img-music6, #img-music7, #img-music8, #img-music9 {
position: relative;
width: 100%;
height: 260px;
border-radius: 15px 15px 0 0;
}
#div-box, #div-box2, #div-box3, #div-box4, #div-box5, #div-box6, #div-box7, #div-box8, #div-box9 {
position: relative;
width: 100%;
height: auto;
border-radius: 0 0 15px 15px;
padding: 18px;
}
.a-1, .a-2, .a-3 {
position: relative;
width: 98%;
height: 38px;
margin: 16px auto;
font-size: 18px;
}
}
/* ★ LARGE TABLETS: 820px ★ */
@media (max-width: 820px) and (min-width: 769px) {
#baner-1 {
width: 103%;
top: -3%;
height: 50%;
}
#logo-1 {
width: 180px;
top: 18px;
}
#logo-2 {
width: 170px;
right: 160px;
top: 18px;
}
#muno {
font-size: 32px;
top: 22px;
left: 25px;
padding: 11px 15px;
display: flex;
}
#muno2 {
width: 280px;
left: -280px;
top: 85px;
}
#heder-div {
width: 59.5%;
height: 50px;
position: absolute;
left: 40%;
top: 240px;
border-radius: 500px 0 0;
}
#heder-div2 {
width: 39%;
height: 50px;
position: absolute;
left: 0;
top: 239px;
border-radius: 0 0 200px;
}
#ul-heder {
position: absolute;
right: 50px;
top: -3px;
flex-direction: row;
}
#ul-heder .li-1 {
width: auto;
margin: 0 10px;
padding: 18px 15px;
height: 17.5px;
}
.instgram {
position: absolute;
right: 70%;
top: -272px;
margin: 5px;
font-size: 28px;
}
.telegram{
position: absolute;
right: 80%;
top: -272px;
margin: 5px;
font-size: 28px;
}
.youtube{
position: absolute;
right:90%;
top: -272px;
margin: 5px;
font-size: 28px;
}
#p-onvaN {
margin-right: 30px;
margin-top: 160px;
font-size: 19px;
}
.jostjoosit {
width: 340px;
margin-left: 25px;
padding: 12px 15px;
font-size: 16px;
}
#icon-submit {
width: 45px;
height: 41px;
left: 15px;
}
.div-music, .div-music2, .div-music3, .div-music4, .div-music5, .div-music6, .div-music7, .div-music8, .div-music9 {
position: absolute;
width: 70%;
height: 300px;
margin: 0;
right: 15%;
opacity: 1;
transform: translateX(0);
}
#img-music1, #img-music2, #img-music3, #img-music4, #img-music5, #img-music6, #img-music7, #img-music8, #img-music9 {
position: absolute;
width: 40%;
height: 90%;
right: 22px;
top: 15px;
border-radius: 5px;
}
#div-box, #div-box2, #div-box3, #div-box4, #div-box5, #div-box6, #div-box7, #div-box8, #div-box9 {
position: absolute;
width: 52%;
height: 87%;
left: 2.5%;
top: 19px;
border-radius: 5px;
padding: 0;
}
}
/* ★ SMALL LAPTOPS: 1024px ★ */
@media (max-width: 1024px) and (min-width: 821px) {
#baner-1 {
width: 102%;
top: -2%;
height: 52%;
}
#logo-1 {
width: 185px;
top: 20px;
}
#logo-2 {
width: 175px;
right: 165px;
top: 20px;
}
#muno {
font-size: 30px;
top: 25px;
left: 30px;
display: flex;
}
#heder-div {
width: 59.5%;
left: 40%;
top: 240px;
height: 50px;
}
#heder-div2 {
width: 39%;
left: 0;
top: 239px;
height: 50px;
}
#ul-heder {
position: absolute;
right: 50px;
top: -3px;
display: flex;
}
.instgram {
position: absolute;
right: 70%;
top: -272px;
margin: 5px;
font-size: 28px;
}
.telegram{
position: absolute;
right: 80%;
top: -272px;
margin: 5px;
font-size: 28px;
}
.youtube{
position: absolute;
right:90%;
top: -272px;
margin: 5px;
font-size: 28px;
}
#p-onvaN {
margin-right: 40px;
font-size: 20px;
}
.jostjoosit {
width: 360px;
}
.div-music, .div-music2, .div-music3, .div-music4, .div-music5, .div-music6, .div-music7, .div-music8, .div-music9 {
width: 68%;
height: 290px;
right: 16%;
}
}
/* ★ DESKTOP: 1025px + ★ */
@media (min-width: 1025px) {
/* Desktop styles preserved as original */
}
/* =====================================================================
INDEX RESPONSIVE REBUILD
فقط برای index.html؛ استایل دسکتاپ اصلی دستنخورده میماند.
===================================================================== */
html,
body {
width: 100%;
max-width: 100%;
overflow-x: hidden;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
@media (max-width: 1024px) {
body:not(.song-page) {
overflow-x: hidden;
}
body:not(.song-page) #main-page {
width: 100%;
max-width: 100%;
overflow-x: clip;
}
body:not(.song-page) header {
width: 100%;
max-width: 100%;
}
body:not(.song-page) header > div {
position: relative;
width: 100%;
max-width: 100%;
height: 335px;
overflow: visible;
}
/* بنر: کوچکتر و کاملاً داخل عرض صفحه */
body:not(.song-page) #baner-1 {
position: absolute;
left: 0;
top: -10px;
width: 100%;
height: 140px;
max-width: 100%;
transform: none;
object-fit: cover;
object-position: center;
z-index: 0;
}
/* دو لوگوی اصلی: سمت راست بنر */
body:not(.song-page) #logo-1 {
position: absolute;
width: clamp(110px, 30vw, 145px);
height: auto;
right: -10px;
top: 15px;
z-index: 3;
}
body:not(.song-page) #logo-2 {
position: absolute;
width: clamp(100px, 22vw, 125px);
height: auto;
right: calc(clamp(82px, 24vw, 135px) + 22px);
top: 15px;
z-index: 3;
}
/* منوی سهخط */
body:not(.song-page) #muno {
position: absolute;
top: 15px;
left: 15px;
z-index: 20;
font-size: clamp(24px, 7vw, 32px);
padding: 8px 12px;
border-radius: 10px;
display: flex;
}
body:not(.song-page) #muno2 {
width: min(280px, calc(100vw - 20px));
max-width: calc(100vw - 20px);
top: 72px;
left: -300px;
height: min(677vh, 500px);
}
/* باکس جستجو: تمامعرض و کوتاه */
body:not(.song-page) #heder-div2 {
position: absolute;
left: 0;
top: 185px;
width: 100%;
height: 65px;
max-width: 100%;
margin: 0;
padding: 0 12px;
border-radius: 0;
display: flex;
align-items: center;
justify-content: center;
z-index: 5;
}
body:not(.song-page) #searchForm {
width: min(500px, 100%);
height: 46px;
margin: 0 auto;
display: flex;
flex-direction: row-reverse;
align-items: stretch;
justify-content: center;
direction: rtl;
position: relative;
}
body:not(.song-page) .jostjoosit {
width: 100%;
max-width: none;
height: 46px;
margin: 0;
padding: 8px 14px;
border-radius: 0 5px 5px 0;
font-size: clamp(13px, 3.5vw, 16px);
min-width: 0;
flex: 1 1 auto;
}
/* دکمه جستجو دقیقاً چسبیده به سمت چپ input */
body:not(.song-page) #icon-submit {
position: static;
flex: 0 0 48px;
width: 48px;
height: 46px;
margin: 0;
border-radius: 5px 0 0 5px;
display: flex;
align-items: center;
justify-content: center;
}
body:not(.song-page) #icon-search {
font-size: 20px;
}
/* heder-div دقیقاً زیر سرچ */
body:not(.song-page) #heder-div {
position: absolute;
left: 0;
top: 255px;
width: 100%;
height: 65px;
max-width: 100%;
margin: 0;
padding: 0 10px;
border-radius: 0;
z-index: 4;
display: flex;
align-items: center;
justify-content: center;
}
/* سه آیکن کنار هم، زیر منوی سهخط و سمت چپ */
body:not(.song-page) #heder-div > .instgram,
body:not(.song-page) #heder-div > .telegram,
body:not(.song-page) #heder-div > .youtube {
position: absolute;
top: -165px;
margin: 0;
width: 34px;
height: 34px;
display: flex;
align-items: center;
justify-content: center;
font-size: 27px;
z-index: 10;
}
body:not(.song-page) #heder-div > .instgram {
left: 16px;
}
body:not(.song-page) #heder-div > .telegram {
left: 56px;
}
body:not(.song-page) #heder-div > .youtube {
left: 96px;
}
body:not(.song-page) .text-icon1,
body:not(.song-page) .text-icon2,
body:not(.song-page) .text-icon3 {
display: none;
}
/* گزینههای اصلی وسط heder-div */
body:not(.song-page) #ul-heder {
position: static;
width: 100%;
max-width: 100%;
margin: 0;
padding: 0;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: clamp(5px, 2vw, 14px);
flex-wrap: nowrap;
text-align: center;
}
body:not(.song-page) #ul-heder .li-1 {
width: auto;
max-width: none;
min-width: 0;
height: auto;
margin: 0;
padding: 9px clamp(7px, 2vw, 14px);
font-size: clamp(11px, 3vw, 15px);
line-height: 1.3;
white-space: nowrap;
top: 0;
}
/* عنوان زیر heder-div */
body:not(.song-page) #p-onvaN {
width: 100%;
max-width: 100%;
margin: 30px 0 35px;
padding: 0 15px;
text-align: right;
font-size: clamp(16px, 4vw, 21px);
line-height: 1.5;
}
/* main دیگر با topهای درصدی و position:absolute کار نمیکند.
کارتها پشت سر هم قرار میگیرند. */
body:not(.song-page) main {
width: 100%;
max-width: 100%;
padding: 0 12px 50px;
margin: 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 28px;
overflow: visible;
}
/* همه کارتها یک ساختار مشترک دارند؛ رنگ هر کارت از CSS اصلی حفظ میشود. */
body:not(.song-page) .div-music,
body:not(.song-page) .div-music2,
body:not(.song-page) .div-music3,
body:not(.song-page) .div-music4,
body:not(.song-page) .div-music5,
body:not(.song-page) .div-music6,
body:not(.song-page) .div-music7,
body:not(.song-page) .div-music8,
body:not(.song-page) .div-music9 {
position: relative;
inset: auto;
width: min(100%, 560px);
max-width: 560px;
height: auto;
min-height: 0;
margin: 0;
padding: 0;
flex: 0 0 auto;
overflow: hidden;
opacity: 0;
transform: translateX(75px);
transition: opacity 0.9s ease-out, transform 0.9s ease-out;
will-change: opacity, transform;
}
body:not(.song-page) .div-music.show,
body:not(.song-page) .div-music2.show,
body:not(.song-page) .div-music3.show,
body:not(.song-page) .div-music4.show,
body:not(.song-page) .div-music5.show,
body:not(.song-page) .div-music6.show,
body:not(.song-page) .div-music7.show,
body:not(.song-page) .div-music8.show,
body:not(.song-page) .div-music9.show {
opacity: 1;
transform: translateX(0);
}
/* کاور همیشه بالا */
body:not(.song-page) #img-music1,
body:not(.song-page) #img-music2,
body:not(.song-page) #img-music3,
body:not(.song-page) #img-music4,
body:not(.song-page) #img-music5,
body:not(.song-page) #img-music6,
body:not(.song-page) #img-music7,
body:not(.song-page) #img-music8,
body:not(.song-page) #img-music9 {
position: relative;
display: block;
inset: auto;
width: 100%;
height: auto;
aspect-ratio: 16 / 9;
max-width: 100%;
object-fit:fill;
object-position: center;
margin: 0;
border-radius: 12px 12px 0 0;
z-index: 1;
}
/* بخش اطلاعات زیر عکس */
body:not(.song-page) #div-box,
body:not(.song-page) #div-box2,
body:not(.song-page) #div-box3,
body:not(.song-page) #div-box4,
body:not(.song-page) #div-box5,
body:not(.song-page) #div-box6,
body:not(.song-page) #div-box7,
body:not(.song-page) #div-box8,
body:not(.song-page) #div-box9 {
position: relative;
inset: auto;
width: 100%;
height: 245px;
min-height: 245px;
max-width: 100%;
margin: 0;
padding: 14px;
border-radius: 0 0 12px 12px;
overflow: hidden;
}
body:not(.song-page) #h2-1,
body:not(.song-page) #h2-2,
body:not(.song-page) #h2-3,
body:not(.song-page) #h2-7 {
position: absolute;
top: 13px;
right: 14px;
left: 14px;
margin: 0;
padding: 8px 10px;
font-size: clamp(16px, 4.5vw, 21px);
line-height: 1.4;
text-align: right;
direction: rtl;
white-space: normal;
}
body:not(.song-page) #p-1,
body:not(.song-page) #p-2,
body:not(.song-page) #p-3,
body:not(.song-page) #p-4,
body:not(.song-page) #p-5,
body:not(.song-page) #p-6,
body:not(.song-page) #p-7,
body:not(.song-page) #p-8,
body:not(.song-page) #p-9,
body:not(.song-page) #p-fit,
body:not(.song-page) #p-fit2 {
position: absolute;
top: 52px;
right: 14px;
left: 14px;
margin: 0;
padding: 8px 10px;
font-size: clamp(14px, 3.4vw, 15px);
line-height: 1.1;
text-align: right;
direction: rtl;
}
/* تاریخ انتشار سمت راست، زیر اطلاعات */
body:not(.song-page) [class^="tarikh-"] {
position: absolute;
top: 145px;
right: 14px;
left: 14px;
bottom: auto;
margin: 0;
padding: 5px 10px;
font-size: clamp(12px, 2.8vw, 13px);
line-height: 1.4;
text-align: right;
direction: rtl;
white-space: normal;
}
/* زمان + آیکن در سمت چپ و بالای دکمه */
body:not(.song-page) .box-time,
body:not(.song-page) .box-time2,
body:not(.song-page) .box-time3,
body:not(.song-page) .box-time4 {
position: absolute;
left: 14px;
right: auto;
top: 154px;
bottom: auto;
width: 100px;
height: 32px;
margin: 0;
padding: 0 7px;
z-index: 5;
display: flex;
align-items: center;
justify-content: flex-start;
}
body:not(.song-page) #icon-time,
body:not(.song-page) #icon-time2,
body:not(.song-page) #icon-time3,
body:not(.song-page) #icon-time4 {
position: static;
flex: 0 0 auto;
margin-right: 6px;
font-size: 14px;
}
body:not(.song-page) .p-time,
body:not(.song-page) .p-time2,
body:not(.song-page) .p-time3,
body:not(.song-page) .p-time4 {
flex: 1 1 auto;
margin: 0;
font-size: clamp(11px, 3vw, 14px);
text-align: center;
white-space: nowrap;
}
/* دکمه دیدن آهنگ همیشه پایین و وسط */
body:not(.song-page) .a-1,
body:not(.song-page) .a-2,
body:not(.song-page) .a-3 {
position: absolute;
left: 14px;
right: 14px;
bottom: 12px;
width: auto;
max-width: none;
height: 42px;
margin: 0;
padding: 5px 10px;
font-size: clamp(14px, 4vw, 18px);
border-radius: 7px;
}
}
/* گوشیهای خیلی کوچک */
@media (max-width: 380px) {
body:not(.song-page) header > div {
height: 325px;
}
body:not(.song-page) #baner-1 {
height: 165px;
top: -10px;
}
body:not(.song-page) #heder-div2 {
top: 135px;
height: 62px;
border-radius: 0 0 420px ;
}
body:not(.song-page) #heder-div {
top: 198px;
height: 48px;
right: -8px;
border-radius: 450px 0 0 ;
}
body:not(.song-page) #searchForm {
height: 34px;
width: 250px;
bottom: 5px;
}
body:not(.song-page) .jostjoosit,
body:not(.song-page) #icon-submit {
height: 44px;
}
body:not(.song-page) #heder-div > .instgram,
body:not(.song-page) #heder-div > .telegram,
body:not(.song-page) #heder-div > .youtube {
top: -120px;
width: 31px;
height: 31px;
font-size: 26px;
}
body:not(.song-page) #heder-div > .instgram { left: 14px; }
body:not(.song-page) #heder-div > .telegram { left: 49px; }
body:not(.song-page) #heder-div > .youtube { left: 84px; }
body:not(.song-page) #ul-heder .li-1 {
padding: 8px 6px;
font-size: 10.5px;
}
body:not(.song-page) #p-onvaN {
margin-top: 18px;
margin-bottom: 28px;
font-size: 15px;
}
body:not(.song-page) main {
padding-left: 10px;
padding-right: 10px;
gap: 24px;
}
body:not(.song-page) #div-box,
body:not(.song-page) #div-box2,
body:not(.song-page) #div-box3,
body:not(.song-page) #div-box4,
body:not(.song-page) #div-box5,
body:not(.song-page) #div-box6,
body:not(.song-page) #div-box7,
body:not(.song-page) #div-box8,
body:not(.song-page) #div-box9 {
height: 235px;
min-height: 235px;
}
body:not(.song-page) .box-time,
body:not(.song-page) .box-time2,
body:not(.song-page) .box-time3,
body:not(.song-page) .box-time4 {
top: 132px;
width: 92px;
}
}
/* تبلت: همان ساختار عمودی، فقط کمی بزرگتر */
@media (min-width: 481px) and (max-width: 1024px) {
body:not(.song-page) header > div {
height: 390px;
}
body:not(.song-page) #baner-1 {
height: 220px;
}
body:not(.song-page) #heder-div2 {
top: 230px;
height: 70px;
}
body:not(.song-page) #heder-div {
top: 305px;
height: 70px;
}
body:not(.song-page) #heder-div > .instgram,
body:not(.song-page) #heder-div > .telegram,
body:not(.song-page) #heder-div > .youtube {
top: -165px;
font-size: 30px;
}
body:not(.song-page) #heder-div > .instgram { left: 18px; }
body:not(.song-page) #heder-div > .telegram { left: 62px; }
body:not(.song-page) #heder-div > .youtube { left: 106px; }
body:not(.song-page) #div-box,
body:not(.song-page) #div-box2,
body:not(.song-page) #div-box3,
body:not(.song-page) #div-box4,
body:not(.song-page) #div-box5,
body:not(.song-page) #div-box6,
body:not(.song-page) #div-box7,
body:not(.song-page) #div-box8,
body:not(.song-page) #div-box9 {
height: 260px;
min-height: 260px;
}
body:not(.song-page) [class^="tarikh-"] {
top: 166px;
}
body:not(.song-page) .box-time,
body:not(.song-page) .box-time2,
body:not(.song-page) .box-time3,
body:not(.song-page) .box-time4 {
top: 166px;
}
}
@media (prefers-reduced-motion: reduce) {
body:not(.song-page) .div-music,
body:not(.song-page) .div-music2,
body:not(.song-page) .div-music3,
body:not(.song-page) .div-music4,
body:not(.song-page) .div-music5,
body:not(.song-page) .div-music6,
body:not(.song-page) .div-music7,
body:not(.song-page) .div-music8,
body:not(.song-page) .div-music9 {
transition: none;
transform: none;
}
}
/* ============================================================
INDEX MOBILE FINAL FIXES - requested layout corrections only
============================================================ */
@media (max-width: 1024px) {
/* دکمه جستجو: سمت چپ input */
body:not(.song-page) #searchForm {
flex-direction: row-reverse;
direction: ltr;
}
body:not(.song-page) .jostjoosit {
direction: rtl;
text-align: right;
}
/* گزینههای heder-div: بزرگتر و متن دقیقاً وسط هر li */
body:not(.song-page) #ul-heder .li-1 {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 10px clamp(8px, 2.5vw, 14px);
font-size: clamp(13px, 3.8vw, 16px);
line-height: 1.35;
}
/* فاصله عنوان از heder-div کم شود، بدون تغییر ظاهر متن */
body:not(.song-page) header > div {
height: 325px;
}
body:not(.song-page) #p-onvaN {
margin-top: -20px;
margin-bottom: 28px;
}
}
/* در گوشیهای خیلی کوچک، heder-div فعلی زودتر تمام میشود؛
ارتفاع header را با همان ساختار فعلی هماهنگ میکنیم. */
@media (max-width: 380px) {
body:not(.song-page) header > div {
height: 258px;
}
body:not(.song-page) #p-onvaN {
margin-top: 5px;
margin-bottom: 24px;
}
}
/* ============================================================
INDEX FINAL FIX - 381px تا 480px
فقط اصلاح فاصله و گوشههای heder-div / heder-div2
============================================================ */
@media (min-width: 381px) and (max-width: 480px) {
body:not(.song-page) #heder-div2 {
top: 130px !important;
height: 65px;
border-radius: 0 0 420px 0 !important;
}
body:not(.song-page) #heder-div {
top: 195px;
height: 65px;
border-radius: 450px 0 0 0 !important;
}
}
/* فقط تنظیم موقعیت آیکنها و عرض جستجو در عرض 381 تا 480 پیکسل */
@media (min-width: 381px) and (max-width: 480px) {
body:not(.song-page) #heder-div > .instgram,
body:not(.song-page) #heder-div > .telegram,
body:not(.song-page) #heder-div > .youtube {
top: -125px;
}
body:not(.song-page) #searchForm {
width: calc(100% - 40px);
}
}
/* فقط: منوی انتخاب آلبوم در ریسپانسیو دقیقاً زیر گزینه خودش */
@media (min-width: 320px) and (max-width: 1024px) {
body:not(.song-page) #ul-heder .li-1:first-child {
position: relative;
z-index: 100000;
}
body:not(.song-page) #ul-heder .li-1:first-child > .ul-2 {
top: 100%;
right: 0;
margin-top: 0;
z-index: 999999;
}
}
/* فقط: پایینتر آمدن ۴ گزینه منوی سهخط در عرض ۳۲۰ تا ۴۸۰ پیکسل */
@media (min-width: 320px) and (max-width: 480px) {
body:not(.song-page) #muno2 ul {
padding-top: 78px;
}
}